import React from 'react';
import $ from 'jquery';
import { Chart, Coord, Axis, Tooltip, Geom,Label, Legend, View } from 'bizcharts';
import DataSet from '@antv/data-set';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card,Select} from 'antd';
import styles from './Analysis.less';
import numeral from 'numeral';
import router from 'umi/router';
const rankingListData = [];
rankingListData.push(
	{ title: '北京',total: 800 },
	{ title: '上海',total: 700 },
	{ title: '河南',total: 600 },
	{ title: '山东',total: 550 },
	{ title: '安徽',total: 500},
	{ title: '河北',total: 480 },
	{ title: '湖南',total: 450 },
	{ title: '山西',total: 430 },
  { title: '湖北',total: 420 },
  { title: '江苏',total: 400 },
);

class AreaMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapData: {},
    };
  }
  componentDidMount() {
    const dataUrl = 'https://gw.alipayobjects.com/os/bmw-prod/d4652bc5-e971-4bca-a48c-5d8ad10b3d91.json';
    $.ajax({
      url: dataUrl,
      success: d => {
        const feas = d.features.map(v => {
          return {...v, properties: {...v.properties, size: Math.floor(Math.random() * 300)} }
        });
        const res = {...d, features: feas}
        this.setState({ mapData: res });
      },
    });
  }

  render() {
    const { mapData } = this.state;
    // data set
    if(Object.keys(mapData).length == 0) return false;
    const ds = new DataSet();

    // draw the map
    const dv = ds
      .createView('back')
      .source(mapData, {
        type: 'GeoJSON',
      })
      .transform({
        type: 'geo.projection',
        projection: 'geoMercator',
        as: ['x', 'y', 'centroidX', 'centroidY'],
      });

    const bgView = new DataSet.View().source(dv.rows);
    const scale = {
      x: { sync: true },
      y: { sync: true },
    };

    const sizes = bgView.rows.map(r=>Number(r.properties.size));

    const min = Math.min(...sizes);
    const max = Math.max(...sizes);
    // const colors ='#075A84,#3978A4,#6497C0,#91B6D7,#C0D6EA,#F2F7F8'.split(',').reverse();
    const colors = '#31c5f8, #61d3f8, #89dcfd, #b0e8f8, #d8f3ff'.split(',').reverse();
    const interval = (max - min)/colors.length;
    return (
    <Card
      bordered={false}
      title={
        <FormattedMessage
          id="app.statisticanalysis.staffByArea"
          defaultMessage="The Proportion of Sales"
        />
      }
      style={{ marginTop: 24 }}
    >
      <div style={{ position: 'relative' }}>
      <Row>
          <Col xl={18} lg={12} md={12} sm={24} xs={24}>
        <Chart
          height={800}
          width={800}
          scale={scale}
          data={bgView}
          forceFit
          padding={[0, 0, 0, 0]}
          onPlotClick={ev => {
                router.push({
                  pathname: '/dashboard/policestatistic',
                  // query: {
                  //     position: ev.data._origin.name
                  // },
                });
          }}
          >
          <Coord reflect='y'/>
          <Tooltip title='name' />
          <Geom
            type="polygon"
            position="x*y"
            // color={['properties', ['#31c5f8', '#61d3f8', '#89dcfd', '#b0e8f8', '#d8f3ff']]}
            style={{
              fill: '#DDDDDD',
              stroke: '#505050',
              lineWidth: 0.5,
              fillOpacity: 0.85,
              cursor: 'pointer'
            }}
            color={['properties',p=>{
              const idx = (Number(p.size)-min)/interval;
              return colors[Math.floor(idx)||0];
            }]}
            tooltip={['name*properties', (t, p) => {
              return {
                //自定义 tooltip 上显示的 title 显示内容等。
                name: `<span>在编: ${p.size}人</span><div style="margin-left: 15px">未在编: ${p.size}人</div>`,
              };
            }]}
          >
          <Label
              content={["name", (name)=>{
                name = name.substr(0,2);
                return name;
              }]}
              textStyle={{
                textAlign: 'middle', // 文本对齐方向，可取值为： start middle end
                fill: '#404040', // 文本的颜色
                fontSize: '12', // 文本大小
              }}
              offsetY={10}
              offsetX={-5}
              autoRotate= {false} // 是否需要自动旋转，默认为 true
            />
            <Tooltip
            showTitle={false}
            />
          </Geom>
        </Chart>
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
            <div className={styles.salesRank}>
              <h4 className={styles.rankingTitle}>
                <FormattedMessage
                  id="app.statisticanalysis.staffAreaByRank"
                  defaultMessage="Sales Ranking"
                />
              </h4>
              <ul className={styles.rankingList}>
                {rankingListData.map((item, i) => (
                  <li key={item.title}>
                    <span
                      className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}
                    >
                      {i + 1}
                    </span>
                    <span className={styles.rankingItemTitle} title={item.title}>
                      {item.title}
                    </span>
                    <span className={styles.rankingItemValue}>
                      {numeral(item.total).format('0,0')}人
                    </span>
                  </li>
                ))}
              </ul>
            </div>
        </Col>
           </Row>
      </div>
      </Card>
    );
  }
}

export default AreaMap
